<template>
	<div class="province-box">
		<header>
			<div class="toBack" @click="back">
				<Iconfont iconClass="right" />
			</div>
			<p>设置</p>
		</header>
		<div class="connect-box">
			<ul>
         	   <li v-for="v in provinceArray" >
         	       <p class="letter-p">{{v.initial}}</p>
         	       <div class="province-list">
         	       	  <p v-for="v in  v.children" key="v.value" @click="clickProvince(v)">{{v.value}}</p>
         	       </div>        	       
         	   </li>
            </ul>
		</div>        
	</div>
</template>
<script>
	import  {province} from '../../../store/dataList'
	export default {
		data() {
			return {
				provinceArray:province
			}
		},
		components: {},
		created() {
           //console.log(this.provinceArray)
		},
		methods: {
			//点击返回
			back() {
				//this.$router.push(`/${this.$channel}/educationHome`)
				this.$router.push({
					path:`/${this.$channel}/educationHome`,
					query:{//父标签的id
						id:this.$route.query.id
					}
				})
			},
			clickProvince(v){
				window.localStorage.setItem('setProvince'+this.$route.query.id,JSON.stringify(v));
				this.$router.push({
					path:`/${this.$channel}/educationHome`,
					query:{//父标签的id
						id:this.$route.query.id
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
.province-box{
	width: 100vw;
	height: 100vh;
	background:white ;

}
header {
		width: 100%;
		height: 80px;
		border-bottom: 2px solid rgba(243, 243, 243, 1);
	}
	
	header .toBack {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 20px;
	}
	
	header .toBack i {
		font-size: 34px;
		color: #000;
	}
	
	header p {
		width: 100%;
		height: 80px;
		text-align: center;
		line-height: 80px;
	}
	.connect-box{
		width: 100vw;
		height: calc(100vh - 80px);
		overflow: scroll;
	}
	.connect-box ul li{
		display: flex;
		width: 750px;
	}
	.letter-p{
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		/*background: silver;*/
		font-size:28px;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.province-list p {
		width: 650px;
		height: 100px;
		line-height: 100px;
		font-size:32px;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
</style>